<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>统计分析</cite></a>
        <a><cite>月销售统计</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">月销售统计</div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md4">
                    <form class="layui-form" lay-filter="year">
                        <div class="layui-form-item" style="margin-top: 10px;">
                            <label class="layui-form-label">年份:</label>
                            <div class="layui-input-block">
                                <select name="year" id="year" lay-verify="" lay-filter="yearSelect">
                                    <option value="">---请选择年份---</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header"><b>销售趋势表</b></div>
                        <div class="layui-card-body">
                            <table id="by-month-table-parseData" lay-filter="by-month-table-parseData"></table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <b>销售趋势图</b>
                        </div>
                        <div class="layui-card-body">
                            <div class="Echarts_month" style="width: 600px; height: 300px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['table', 'admin', 'form', 'echarts'], function () {
        var admin = layui.admin
            , table = layui.table
            , form = layui.form
            , baseUrl = layui.setter.baseUrl
            , $ = layui.$
            , echarts = layui.echarts;

        // 初始化图表
        var chartDom = $('.Echarts_month');
        var myChart = echarts.init(chartDom[0]);
        var option = {
            title: {
                text: '月度销售统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function(params) {
                    return params[0].name + '<br/>销售额：¥' +
                        params[0].value.toLocaleString('zh-CN', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        });
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '¥{value}'
                }
            },
            series: [{
                name: '销售额',
                type: 'line',
                smooth: true,
                data: [],
                label: {
                    show: true,
                    formatter: '¥{c}'
                },
                areaStyle: {
                    opacity: 0.1
                }
            }]
        };

        // 加载年份下拉框数据
        admin.req({
            url: baseUrl + 'statistics/getYearList',
            type: 'get',
            success: function(res) {
                if (res.code === 200 && res.data) {
                    var yearSelect = $('#year');
                    yearSelect.empty(); // 清空现有选项
                    yearSelect.append(new Option('请选择年份', ''));
                    res.data.forEach(function(year) {
                        yearSelect.append(new Option(year, year));
                    });

                    // 设置默认年份为当前年
                    var currentYear = new Date().getFullYear();
                    if (res.data.includes(currentYear)) {
                        yearSelect.val(currentYear);
                    } else if (res.data.length > 0) {
                        yearSelect.val(res.data[0]); // 如果没有当前年，选择第一个年份
                    }

                    form.render('select', 'year');

                    // 加载默认年份的数据
                    var selectedYear = yearSelect.val();
                    if (selectedYear) {
                        loadData(selectedYear);
                    }
                } else {
                    layer.msg('获取年份列表失败');
                }
            },
            error: function() {
                layer.msg('获取年份列表失败，请检查网络连接');
            }
        });

        // 监听年份选择
        form.on('select(yearSelect)', function(data) {
            if (data.value) {
                loadData(data.value);
            }
        });

        // 加载数据函数
        function loadData(year) {
            admin.req({
                url: baseUrl + 'statistics/listByMonth',
                type: 'get',
                data: { year: year },
                success: function(res) {
                    if (res.code === 200 && res.data) {
                        // 表格数据
                        table.render({
                            elem: '#by-month-table-parseData',
                            data: res.data,
                            cols: [[
                                { field: 'month', title: '月份', width: 120, align: 'center',
                                    templet: function(d) { return d.month + '月'; }},
                                { field: 'money', title: '销售额(元)', align: 'right',
                                    templet: function(d) {
                                        return parseFloat(d.money || 0).toLocaleString('zh-CN', {
                                            minimumFractionDigits: 2,
                                            maximumFractionDigits: 2
                                        });
                                    }}
                            ]],
                            limit: 12,
                            text: {
                                none: '暂无数据'
                            }
                        });

                        // 图表数据
                        var chartData = new Array(12).fill(0);
                        res.data.forEach(function(item) {
                            chartData[parseInt(item.month) - 1] = parseFloat(item.money || 0);
                        });

                        option.title.text = year + '年销售趋势';
                        option.series[0].data = chartData;
                        myChart.setOption(option);
                    } else {
                        layer.msg(res.msg || '获取数据失败');
                    }
                },
                error: function() {
                    layer.msg('获取数据失败，请检查网络连接');
                }
            });
        }

        // 监听窗口大小变化，调整图表大小
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    });

</script>
